<template>
	<view class="bg">
		<view class="classifyBox">
			<view class="primaryClassification">
				<text 
					id="tabs_item_0" 
					class="primaryClassification_title" 
					:class="{'checkTab': activeTab == 0}"
					@click="checkLineLocation(0)"
				>品牌特卖</text>
				<text 
					id="tabs_item_1" 
					class="primaryClassification_title" 
					:class="{'checkTab': activeTab == 1}"
					@click="checkLineLocation(1)"
				>甄选好物</text>
				<view :style="elementStyle" class="tabStyle"></view>
			</view>
			<view class="secondaryClassification">
				<scroll-view class="scroll1" scroll-x="true" scroll-left="120">
					<text 
						v-for="(item,index) in classificationList" 
						:key="index"
						class="secondaryClassification_item"
						:class="{'secondaryClassification_item_check': activeCif == index}"
						@click="checkClassification(index)"
					>{{item.name}}</text>
				</scroll-view>
			</view>
		</view>
		
		<view class="explosion" :style="'margin:0 '+prConfig+'rpx'" v-if="activeTab == 0">
			<view class="common-hd" mode="widthFix" v-if="logoUrl">
				<image class="title-img" mode="widthFix" :src="logoUrl"></image>
			</view>
			<view class="mer-box">
				<view class="mer-item"  v-for="(item, index) in brandList" :key="index" :style="'border-radius:'+bgStyle+'rpx'">
					<view class="mer-hd" @click="goStore(item.mer_id)" :style="'border-radius:'+bgStyle+'rpx '+bgStyle+'rpx 0 0'">
						<!-- <image :src="item.mer_banner"></image> -->
						<view class="mer-name">
							<image :src="item.mer_avatar"></image>
							<view class="txt line1" style="position:relative;top:-15px">{{ item.mer_name }}</view>
							<text v-if="item.type_name" class="store_type" :style="'background:'+themeColor" style="position:relative;top:-15px">{{ item.type_name }}</text>
							<text v-else-if="item.is_trader" class="store_type" :style="'background:'+themeColor" style="position:relative;top:-15px">自营</text>
							
						</view>
						<view class="activityBox">
							<view 
								class="uniTag"
								style="background-color: rgba(219, 53, 244,0.1); border-radius: 3px; border:1px solid #db35f4;"
							>
								<image src="../../../static/images/shopList_ms.png"></image>
								<text style="color: #db35f4;">秒杀</text>
							</view>
							<view 
								class="uniTag"
								style="background-color: rgba(231, 80, 70,0.1); border-radius: 3px; border:1px solid #e75046;"
							>
								<image src="../../../static/images/shopList_tm.png"></image>
								<text style="color: #e75046;">特卖</text>
							</view>
							<view 
								class="uniTag"
								style="background-color: rgba(76, 215, 126,0.1); border-radius: 3px; border:1px solid #4cd77e;"
							>
								<image src="../../../static/images/shopList_ykj.png"></image>
								<text style="color: #4cd77e;">一口价</text>
							</view>
							<!-- <uni-tag text="秒杀" size="mini" type="success"></uni-tag> -->
						</view>
						<view class="mer-name1">
							距结束<text class="txt">01</text>天
						</view>
					</view>
					<view class="pro-box">
						<scroll-view class="scroll2" scroll-x="true">
							<navigator 
								:url="`/pages/other/goods_details/index?id=${itemn.product_id}`"
								hover-class="none"
								class="pro-item"
								v-for="(itemn, indexn) in item.all_recommend"
								:key="indexn"
							>
								<view class="picture">
									<easy-loadimage mode="widthFix" :image-src="itemn.image"></easy-loadimage>
									<view v-if="itemn.border_pic" :style="{ backgroundImage: `url(${itemn.border_pic})` }" class="border-picture"></view>
								</view>
								<view class="price" style="color:#e54c44">
									<priceFormat :price="itemn.price" weight intSize="40" floatSize="26" labelSize="26"></priceFormat>
								</view>
								<text class="originalprice">¥300</text>
							</navigator>
							<navigator class="pro-item2" 
								url="/pages/other/merchant_marketing/index"
								hover-class="none"
							>
								<view class="proItemMore">
									<image src="../../../static/images/shopList_gd.png"></image>
									<text>更多商品</text>
								</view>
							</navigator>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="activeTab == 1">
			<goodsList :hostProduct="hostProduct" :indexP="true" :isTab="true" :isLogin="false"></goodsList>
		</view>
	</view>
</template>

<script>
import { storeList } from '@/api/api.js';	
import { mapGetters } from 'vuex';
import { configMap } from '@/utils';
import priceFormat from '@/components/priceFormat';
import goodsList from './goodsList.vue';
import { storeMerchantList, getGeocoder ,getProductslist, getProductHot, storeCategory } from '@/api/store.js';

export default {
	components: {
		priceFormat,
		goodsList
	},
	props: {
		dataConfig: {
			type: Object,
			default: () => {}
		}
	},
	data(){
		return {
			prConfig: this.dataConfig.prConfig.val*2, //背景间距
			logoUrl: this.dataConfig.logoConfig.url,
			bgStyle: this.dataConfig.bgStyle.type ? '24' : 0,
			themeColor: this.dataConfig.themeColor.color[0].item,
			activeTab:0,
			elementStyle: {
				transform: 'translateX(0px)',
				transition: 'transform 0.5s ease-out'
			},
			activeCif:0,
			classificationList:{},
			cateList:[
				[
					{name:"时尚女装"},
					{name:"户外运动"},
					{name:"户外运动"},
					{name:"家居家纺"},
					{name:"品质男装"},
					{name:"品质女装"}
				],
				[
					{name:"美妆个护"},
					{name:"时尚女装"},
					{name:"数码家电"},
					{name:"母婴亲子"},
					{name:"生鲜水果"}
				]
			],
			brandList:{},
			
			hostProduct: [],
			hotPage: 1,
			hotLimit: 30,
			hotScroll: true,
			hotLoading: false,
			hotTitle: '加载更多',
		}
	},
	mounted(){
		this.checkLineLocation(0);
		this.classificationData(0);
		this.storeMerchant();
		this.get_host_product();
	},
	methods:{
		get_host_product: function() {
			console.log('get_host_product')
			let that = this;
			let num = that.hotLimit;
			if (!that.hotScroll) return;
			if (that.hotLoading) return;
			that.hotLoading = true;
			that.hotTitle = '';
			getProductHot(that.hotPage, that.hotLimit).then(res => {
				console.log('res',res)
				let list = res.data.list;
				let productList = that.$util.SplitArray(list, that.hostProduct);
				let hotScroll = list.length <= num && list.length != 0;
				that.hotScroll = hotScroll;
				that.hotLoading = false;
				that.hotTitle = !hotScroll ? '已全部加载' : '加载更多';
				that.$set(that, 'hostProduct', productList);
				that.$set(that, 'hotPage', that.hotPage + 1);
			});
		},
		checkLineLocation(ob)
		{
			const query = uni.createSelectorQuery().in(this);
			query.select('#tabs_item_'+ob).boundingClientRect((data)=>{
				if(data)
				{
					let lineLeft = data.left + (data.width / 2) - 29;
					this.elementStyle.transform = 'translateX('+lineLeft+'px)';
					this.activeTab = ob;
					this.classificationData(ob);
					this.activeCif = 0;
				}
			}).exec();
		},
		checkClassification(ob){
			this.activeCif = ob;
		},
		classificationData(ob){
			this.classificationList = this.cateList[ob];
		},
		storeMerchant() {
			storeList({
				diy_id: this.diy_id,
				unique: this.unique,
				page: 1,
				limit: this.numConfig ? this.numConfig : 4,
				is_best: 1
			}).then(res => {
				console.log(res.data);
				this.brandList = res.data.list;
			});
		}
	}
}
</script>

<style  scoped lang="scss">
.bg{width: 100%; height: auto; position: 10px; margin-top: 10px;}
.classifyBox{width: 100%; height: auto;}
.primaryClassification{width: calc(100% - 20px); float: left; margin-left: 10px; height: 60px; border-radius: 13px; background-color: #FFF;}
.primaryClassification_title{width: 50%; height: 100%; float: left; text-align: center; line-height: 60px; font-size: 19px;font-weight: bold; color: #686868;}
.checkTab{color:#333333;}
.tabStyle{position: relative; width: 35px; height: 5px; border-radius: 2px; background-color: #ff2a57; left: 0px; top: 45px;}
.secondaryClassification{width: calc(100% - 20px); margin-bottom: 8px; float: left; margin-left: 10px; margin-top: 10px; height:40px}
.scroll1{ white-space: nowrap; width: 100%;}
.secondaryClassification_item{width: 105px; display: inline-block; background-color: #FFF; font-size: 15px; margin-right: 7px; color:#838383;  text-align: center; height: 33px; line-height: 33px; border-radius: 5px; }
.secondaryClassification_item_check{border:1px solid #ff2a57; color: #ff2a57; background-color: rgba(255,42,87,0.05);}

.explosion {
	.common-hd {
		display: flex;
		align-items: center;
		justify-content: center;
		.title-img{
			width: 242rpx;
			margin: 20rpx 0;
		}
	}
	.mer-box {
		margin-bottom: 20rpx;
		.mer-item {
			margin-bottom: 20rpx;
			text-align: center;
			.mer-hd {
				position: relative;
				width: 100%;
				height: 120rpx;
				border-radius: 16rpx 16rpx 0 0;
				overflow: hidden;
				background-color: #FFF;
				image {
					width: 100%;
					height: 100%;
				}
				.mer-name1{
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					background: #fff;
					border-radius: 12rpx;
					letter-spacing:0.6px;
					.txt{
						background: #F53B3A;
						padding: 6rpx 10rpx 6rpx 10rpx;
						border-radius: 12rpx;
						font-weight: bold;
						color:#ffffff;
						margin: 0px 5px;
						
					}
				}
				.mer-name {
					position: absolute;
					left: 20rpx;
					top: 20rpx;
					display: flex;
					max-width: 60%;
					padding: 6rpx 10rpx 6rpx 6rpx;
					border-radius: 26rpx;
					background: #fff;
					font-weight: bold;
					font-size: 12px;
					align-items: center;
					image {
						width: 100rpx;
						height: 90rpx;
						margin-right: 10rpx;
						border-radius: 10%;
					}
					.txt {
						flex: 1;
						line-height: 19px;
						height: 19px;
						font-size:32rpx;
					}
					.store_type {
						font-size: 18rpx;
						color: #fff;
						background-color: #e93323;
						padding: 0 5px;
						line-height: 30rpx;
						height: 30rpx;
						margin-left: 8rpx;
						border-radius: 68rpx;
					}
				}
				.activityBox{
					display: flex;
					position: absolute;
					left:136rpx;
					top:80rpx;
					.uniTag{
						width: auto;
						height: 18px;
						padding:1px 4px;
						margin-right: 8px;
						display: flex;
						align-items: center;
						text{
							width: auto;
							height: 18px;
							line-height: 19px;
							font-size: 12px;
						}
						image{
							width: 13px;
							height: 13px;
							margin-right: 3px;
						}
					}
				}
			}
		}
		.pro-box {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx 24rpx 20rpx;
			background-color: #FFF;
			border-radius:0px 0px 13px 13px;
			.scroll2{
				white-space: nowrap;
				width: 100%;
				text-align: left;
				.pro-item2{
					display: inline-block;
					width:214rpx;
					margin-right: 8px;
					height: 300rpx;
					margin-top: -30px;
					.proItemMore{
						float: left;
						margin-top: 22px;
						width: 214rpx;
						height: 214rpx;
						background-color:rgb(246, 246, 248);
						border-radius: 8px;
						display: flex;
						align-items: center;
						// justify-content: center;
						image{
							position: relative;
							top: -10%;
							width: 26px; 
							height: 26px;
							left: 50%;
							margin-left: -13px;
						}
						text{
							position: relative;
							width: 100%;
							top: 12%;
							text-align: center;
							margin-left: -10px;
							font-size: 15px;
							color:rgb(152,154,155);
						}
					}
				}
				.pro-item{
					display: inline-block;
					width:214rpx;
					height: 300rpx;
					margin-right: 8px;
					
					.picture,/deep/.easy-loadimage,/deep/uni-image,/deep/image,/deep/.loadfail-img {
						width: 100%;
						height: 214rpx;
						position: relative;
						border-radius: 8px;
					}
					.sell_out {
						display: flex;
						width: 110rpx;
						height: 110rpx;
						align-items: center;
						justify-content: center;
						border-radius: 100%;
						background: rgba(0,0,0,.6);
						color: #fff;
						font-size: 24rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: -55rpx 0 0 -55rpx;
						&::before{
							content: "";
							display: block;
							width: 100rpx;
							height: 100rpx;
							border-radius: 100%;
							border: 1px dashed #fff;
							position: absolute;
							top: 5rpx;
							left: 5rpx;
						}
					}
					.border-picture {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: center/cover no-repeat;
					}
					.name{
						padding: 6rpx 9rpx 6rpx 0px;
						margin-top: 6rpx;
					}
					.price {
						margin-top: 20rpx;
						font-size: 28rpx;
						color: $theme-color;
						font-weight: bold;
						text {
							font-size: 28rpx;
						}
					}
					.originalprice{
						width: 100%;
						float: left;
						text-decoration: line-through;
						margin-top: 6rpx;
						font-size: 25rpx;
						color: #dedede;
					}
					&:last-child {
						margin-right: 0;
					}		
					.picture {
						position: relative;
					}				
					.border-picture {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: center/cover no-repeat;
					}
				}
			}
		}
	}
	
}

</style>